<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :title="$t('FILTER_LINK_SEGMENT')"
    :visible="dialogVisible"
    :width="setDialogWidth('800px')"
    @close="$emit('close', false)"
  >
    <el-form ref="otdrParam" label-width="80px" class="flex flex-wrap pr-20">
      <el-form-item class="w-50 region-cascader" :label="$t('A_END_STATION_NAME')">
        <region-cascader
          :multiple="true"
          :placeholder="'A_END_STATION_NAME'"
          @change="aStationChange"
        />
      </el-form-item>
      <el-form-item class="w-50 region-cascader" :label="$t('Z_END_STATION_NAME')">
        <region-cascader
          :placeholder="'Z_END_STATION_NAME'"
          :multiple="true"
          @change="zStationChange"
        />
      </el-form-item>
      <el-form-item class="w-50" :label="$t('ANODE')">
        <el-select
          v-model="aNodeIds"
          clearable
          class="mr-10"
          multiple
          collapse-tags
          :placeholder="$t('ANODE')"
        >
          <el-option
            v-for="item in aNodeList"
            :key="item.nodeId"
            :value="item.nodeId"
            :label="item.nodeName"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="w-50" :label="$t('ZNODE')">
        <el-select
          v-model="zNodeIds"
          clearable
          class="mr-10"
          multiple
          collapse-tags
          :placeholder="$t('ZNODE')"
        >
          <el-option
            v-for="item in zNodeList"
            :key="item.nodeId"
            :value="item.nodeId"
            :label="item.nodeName"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="$emit('close', false)">{{ $t('CANCEL') }}</el-button>
      <el-button @click="getRouteList">{{ $t('CONFIRM') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import nodeApi from '@/api/oen/NodeApi'
  import logicSegmentApi from '@/api/oen/LogicSegmentApi'
  import RegionCascader from '@/components/RegionCascader'
  export default {
    components: {
      RegionCascader
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        startRegionIds: '',
        endRegionIds: '',
        aNodeList: [],
        zNodeList: [],
        aNodeIds: [],
        zNodeIds: [],
        aStationList: [],
        zStationList: []
      }
    },
    methods: {
      // 区域搜索条件改变
      aStationChange(data) {
        this.aStationList = data
        this.aNodeList = []
        this.startNodeIds = []
        this.getNodeList(data, 'a')
      },
      zStationChange(data) {
        this.zStationList = data
        this.zNodeList = []
        this.endNodeIds = []
        this.getNodeList(data, 'z')
      },
      getNodeList(data, type) {
        console.log('data', data)
        if (data.length === 0) return
        nodeApi
          .queryPage({
            nodeType: null,
            stationIdList: data,
            page: { page: 1, size: 99999 }
          })
          .then(res => {
            this[type + 'NodeList'] = res.list || []
          })
      },
      getRouteList() {
        logicSegmentApi.queryPage(
          {
            keyword: '',
            startList: this.aStationList,
            endList: this.zStationList,
            startNodeIdList: this.aNodeIds,
            endNodeIdList: this.zNodeIds
          },
          { page: 1, size: 9999 }
        ).then(res => {
          this.$emit('close', res.list || [])
        })
      },
      close() {}
    }
  }
</script>
<style>
  .region-cascader.el-form-item--mini .el-form-item__content {
    line-height: 19px;
  }
</style>
